<template>
  <div>
    <!-- <h1> 1 2 3 4 5 5 6 7 8 9 ------ - - - - -  - - - - - - - - - - - </h1> -->

    <van-nav-bar
      title="Application"
      :left-text="this.nav_text"
      :left-arrow="this.nav_flag"
      @click-left="onClickLeft"
      class="nav_bar"
      fixed
    />


    <transition>
        <router-view class="contain"/>
    </transition>



      <van-tabbar route>
        <van-tabbar-item
          replace
          to="/home"
          icon="wap-home-o"
        >
          首页
        </van-tabbar-item>

        <van-tabbar-item
          replace
          to="/goods"
          icon="points"
        >
          商品详情
        </van-tabbar-item>

        <van-tabbar-item
          replace
          to="/car"
          icon="shopping-cart-o"
          :info="$store.getters.getQuantity"
        >
          购物车
        </van-tabbar-item>

        <van-tabbar-item
          replace
          to="/contact"
          icon="phone-o"
          
        >
          联系我
        </van-tabbar-item>
      </van-tabbar>


  </div>
</template>


<script>

import Vue from 'vue';

import { NavBar,Toast,Tabbar, TabbarItem,Icon } from 'vant';


Vue.use(NavBar).use(Toast).use(Tabbar).use(TabbarItem).use(Icon)


export default {

  data(){
    return{
      nav_text:'',
      nav_flag:false,
      active: 0
    }
  },
  created(){
    // this.changeQuantity()
  },
  methods:{
    onClickLeft() {
      this.$router.go(-1)
      Toast('返回');
    }/* ,
    changeQuantity(){
      console.log(this.$store.state.quantity)
      this.quantity = this.$store.state.quantity
    } */
  },
  watch:{
    '$route.path':{
      handler(newval){
      if(newval=='/home'||newval=='/goods'||newval=='/car'||newval=='/contact'){
        this.nav_text=''
        this.nav_flag=false
      }else{
        this.nav_text='返回'
        this.nav_flag=true
      }
    },
    immediate:true
    }
  }
  
}
</script>


<style lang="less" scoped>

.contain{
  padding: 46px 0 50px;
  width: 100%;
  overflow-x: hidden;
}


.nav_bar{
  background-color:pink;
  margin-bottom: 5px;
}

.v-enter{
  opacity: 0;
  transform: translateX(100%);
}
.v-leave-to{
  opacity: 0;
  transform: translateX(-100%);
  position: absolute;
}
.v-enter-active,.v-leave-active{
  transition: all .7s;
}
.v-move{
  transition: all .7s;
}
.v-leave-active{
  position: absolute;
}


  
</style>